import React, { Component } from "react";

// 组件自己定义的变量或者数据是state, 相当于vue的data
// 只有类组件可以定义state
class App extends Component {
  // 1. 直接用字面量的方式定义
  // state = {
  //   name: "zhangsan",
  //   age: 20,
  // };

  // 2. 使用构造函数的构造器里面定义state
  // constructor是一个类里面的特殊的函数，是当这个类被实例化的时候自动调用的
  constructor() {
    super();
    this.state = {
      name: "zhangsan",
      age: 20,
      title: "hello",
      isShow: true,
      list: [1, 2, 3],
    };
  }

  // 在外面定义的变量是没有响应式的
  // sex = "男";

  render() {
    const { name, age, title, isShow, list } = this.state;
    return (
      <>
        <h2>state</h2>
        <p>我的姓名是：{name}</p>
        {/* 在react里面，属性和文本都是使用一个大括号 */}
        <p title={title}>我的年龄是：{age}</p>
        {/* 条件渲染，不能使用if */}
        {/* {this.state.isShow ? <p>你看到我了</p> : null} */}
        {isShow && <p>你看到我了</p>}
        {/* 循环渲染 */}
        <ul>
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
